<template>


  <el-container>
    <el-header id="head">
      <el-row>
        <el-col :span="12">
          <div class="grid-content ">
            <h1>只因酒店</h1>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2" @click="openLoginDiago" v-show="loginButton">登录</el-menu-item>
              <el-menu-item index="3" @click="openRegisterDiago" v-show="registerButton">注册</el-menu-item>
              <el-menu-item index="4" v-if="huanyingcontroller"  @click="openMyUser" v-bind:huanyingcontroller="huanyingcontroller">欢迎，
                           <el-avatar  :src="userLogin.avatar"></el-avatar>
                {{userLogin.nickname}}</el-menu-item>
              <el-menu-item index="5" v-if="huanyingcontroller" @click="logOut" v-bind:huanyingcontroller="huanyingcontroller">退出</el-menu-item>
              <el-menu-item index="6" v-if="huanyingcontroller" @click="openMyOrder" v-bind:huanyingcontroller="huanyingcontroller">我的订单</el-menu-item>
              <el-menu-item index="7" v-if="huanyingcontroller" @click="openMyReserve" v-bind:huanyingcontroller="huanyingcontroller">我的预定</el-menu-item>
               <el-menu-item index="8" v-if="huanyingcontroller" @click="openMyMoney" v-bind:huanyingcontroller="huanyingcontroller">充值</el-menu-item>
            </el-menu>
          </div>
        </el-col>
      </el-row>

    </el-header>
    <el-main>
      <!-- 轮播图 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="item in carousel" :key="item.carouselId">
                <img :src="item.imageUrl" class="bannerImg" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>
      <!-- 房间展示 -->
      <el-row v-show="roomShow">
        <el-col :span="24">
          <el-container v-for="(item,floorIndex) in floor" :key="floorIndex">
            <el-header :id="item.floorName">{{item.floorName}}</el-header>
            <el-main>
              <el-row>
                <el-col :span="5" v-for="(ele, roomIndex) in room" :key="roomIndex" :offset="roomIndex > 0 ? 2 :2">
                  <el-card :body-style="{ padding: '0px' }" v-show="item.floorNumber==ele.floorId" class="elCard">
                    <a @click="gotoRoom(ele)"><img :src="ele.imageUrl" class="image"></a>
                    <div>
                      <h3 v-text="'房间类型：'+roomTypeIdParse(ele.roomTypeId)+ ele.roomNumber"></h3>
                      <div class="bottom clearfix">
                        <span style="color:red"><s>原价：{{ele.roomPrice}}</s></span>

                        <span style="color:red">折扣价{{ele.roomDiscountPrice}}</span><br>
                        <el-button type="text" class="button" @click="reserveButton(ele)">预定</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-container>
        </el-col>
      </el-row>
      <!-- 登录对话框 -->
      <el-row v-show="loginShow">
        <el-dialog title="登录" :visible.sync="dialogVisibleLogin" width="30%" @close="offLoginDialog">
          <span>

            <el-form ref="loginForm" :model="loginForm" :rules="rulesLogin" label-width="80px">
              <!-- 登录表单项 -->
              <el-form-item label="账号" prop="username">
                <el-input v-model="loginForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password"></el-input>
              </el-form-item>
              <el-form-item label="验证">
                <puzzle ref="yanzhengma" ></puzzle>

              </el-form-item>

              <!-- 登录按钮 --> <!-- 注册按钮 -->
              <el-form-item>
                <el-button type="primary" @click="handleSubmit">登录</el-button>
                <el-button type="success" @click="handleRegister">注册</el-button>
              </el-form-item>
            </el-form>
          </span>
        </el-dialog>
      </el-row>

      <!-- 注册对话框 -->
      <el-row v-show="registerShow">
        <el-dialog title="注册" :visible.sync="dialogVisibleRegister" width="30%" append-to-body :close-on-click-modal="false" @close="offRegisterDialog">
          <el-form ref="RegisterForm" :model="RegisterForm" :rules="rules" label-width="80px">
            <el-form-item label="账号" prop="username">
              <el-input v-model="RegisterForm.username" placeholder="请输入账号" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="RegisterForm.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="RegisterForm.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <!-- 头像上传start -->
            <el-form-item label="头像" prop="avatar">

              <el-upload class="avatar-uploader" accept=".jpg,jpeg" :headers="upload.headers" :action="upload.url" :show-file-list="false" :on-progress="deletePreImg" :file-list="upload.fileList" name="file" :on-success="handleAvatarSuccessRegisterForm" :before-upload="beforeAvatarUpload">
                <img v-if="RegisterForm.avatar" :src="RegisterForm.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

            </el-form-item>
            <!-- 头像上传end -->
            <el-form-item label="姓名" prop="name">
              <el-input v-model="RegisterForm.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="RegisterForm.gender" placeholder="选择性别">
                <el-option v-for="dict in dict.type.gender" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="RegisterForm.age" placeholder="请输入年龄" />
            </el-form-item>
            <el-form-item label="职业" prop="occupation">
              <el-input v-model="RegisterForm.occupation" placeholder="请输入职业" />
            </el-form-item>
            <el-form-item label="电话号码" prop="phoneNumber">
              <el-input v-model="RegisterForm.phoneNumber" placeholder="请输入电话号码" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="RegisterForm.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="验证">
              <puzzle ref="yanzhengma"></puzzle>

            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormRegister">确 定</el-button>
            <el-button @click="cancelRegister">取 消</el-button>
          </div>
        </el-dialog>
      </el-row>

      <!-- 房间详情对话框 -->
      <el-row v-if="singleRoomShow">
        <el-dialog title="房间详情" :fullscreen='true' :visible.sync="singleRoomShow" :destroy-on-close='true'>
          <span>
            <el-descriptions title="房间信息">
              <el-descriptions-item label="房间号">{{singleRoom.roomNumber}}</el-descriptions-item>
              <el-descriptions-item label="房间名称">{{singleRoom.roomName}}</el-descriptions-item>
              <el-descriptions-item label="房间类型"><span v-text="roomTypeIdParse(singleRoom.roomTypeId)"></span></el-descriptions-item>
              <el-descriptions-item label="所属楼层"><span v-text="floorIdParse(singleRoom.floorId)"></span></el-descriptions-item>
              <el-descriptions-item label="房间价格"><del style="color:red">{{singleRoom.roomPrice}}</del></el-descriptions-item>
              <el-descriptions-item label="折后价">{{singleRoom.roomDiscountPrice}}</el-descriptions-item>
              <el-descriptions-item label="床型">{{singleRoom.bedType}}</el-descriptions-item>
              <el-descriptions-item label="宽带">{{singleRoom.internet}}</el-descriptions-item>

            </el-descriptions>

            <el-descriptions>
              <el-descriptions-item label="房间描述">
                <h1 v-html="singleRoom.roomDescription">

                </h1>
              </el-descriptions-item>
            </el-descriptions>

          </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="openReserveDialog(singleRoom)">预定</el-button>
            <el-button @click="singleRoomShow = false">关 闭</el-button>
          </span>

        </el-dialog>

      </el-row>



            <!-- 我的订单对话框 -->
      <el-row v-show="myOrder">
         <el-dialog title="我的订单" :visible.sync="myOrder" width="1000px" append-to-body @close="offMyOrderDiaog">
          <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multipleMyOrder"
          @click="handleDeleteMyOrder"
        >删除</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loadingMyOrder" :data="orderList" @selection-change="handleSelectionChangeMyOrder">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="订单号" align="center" prop="orderId" />
      <el-table-column label="会员账号" align="center" prop="userName" />
      <el-table-column label="订单金额" align="center" prop="amount" />
      
                 <el-table-column label="订单状态" align="center" prop="orderStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.join_state" :value="scope.row.orderStatus">

          </dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注字段" align="center" prop="remarks" />
      <el-table-column label="创建时间" align="center" prop="creationTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.creationTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteMyOrder(scope.row)"
          >删除</el-button>
                    <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleCancleMyOrder(scope.row)"
          >取消订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="totalMyOrder>0"
      :total="totalMyOrder"
      :page.sync="queryParamsMyOrder.pageNum"
      :limit.sync="queryParamsMyOrder.pageSize"
      @pagination="getMyOrderList"
    />


      <div slot="footer" class="dialog-footer">
        <el-button @click="offMyOrderDiaog()">关 闭</el-button>
      </div>
    </el-dialog>
      </el-row>

                  <!-- 我的预定对话框 -->
      <el-row v-show="myReserve">
         <el-dialog title="我的预定" :visible.sync="myReserve" width="1500px" append-to-body @close="offMyReserveDiaog">
   <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="singleMyReserve"
          @click="handleUpdateMyReserve"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multipleMyReserve"
          @click="handleDeleteMyReserve"
        >删除</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loadingMyReserve" :data="reserveList" @selection-change="handleSelectionChangeMyReserve">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="reserveId" />
      <el-table-column label="订单号" align="center" prop="orderNumber" />
      <el-table-column label="房间号" align="center" prop="roomNumber" />
      <el-table-column label="客户姓名" align="center" prop="customerName" />

                 <el-table-column label="入住状态" align="center" prop="joinState">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.join_state" :value="scope.row.joinState">

          </dict-tag>
        </template>
      </el-table-column>

            <el-table-column label="性别" align="center" prop="gender">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.gender" :value="scope.row.gender">

          </dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="phoneNumber" />
      <el-table-column label="身份证" align="center" prop="idCard" />
      <el-table-column label="入住时间" align="center" prop="joinTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.joinTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退房时间" align="center" prop="checkOutTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.checkOutTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateMyReserve(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteMyReserve(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="totalMyReserve>0"
      :total="totalMyReserve"
      :page.sync="queryParamsMyReserve.pageNum"
      :limit.sync="queryParamsMyReserve.pageSize"
      @pagination="getListMyReserve"
    />

      <div slot="footer" class="dialog-footer">
        <el-button @click="offMyReserveDiaog()">关 闭</el-button>
      </div>
    </el-dialog>
      </el-row>

            <!-- 预定对话框 -->
      <el-row v-show="reserveForm">
         <el-dialog title="房间预约" :visible.sync="reserveForm" width="500px" append-to-body @close="offFormReserveDate">
      <el-form ref="formReserveDate" :model="formReserveDate" :rules="rulesReserve" label-width="80px">
        <el-form-item label="房间号" prop="roomNumber">
          <el-input v-model="formReserveDate.roomNumber" placeholder="请选择房间号"   disabled/>
        </el-form-item>
        <el-form-item label="客户姓名" prop="customerName">
          <el-input v-model="formReserveDate.customerName" placeholder="请输入客户姓名" />
        </el-form-item>
                <el-form-item label="性别" prop="gender">
          <el-select v-model="formReserveDate.gender" placeholder="选择性别">
            <el-option v-for="dict in dict.type.gender" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="formReserveDate.phoneNumber" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="formReserveDate.idCard" type="text" placeholder="请输入身份证" />
        </el-form-item>
        <el-form-item label="入住时间" prop="joinTime">
          <el-date-picker clearable
            v-model="formReserveDate.joinTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择入住时间"
            :picker-options="pickerOptions"
          
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="退房时间" prop="checkOutTime">
          <el-date-picker clearable
            v-model="formReserveDate.checkOutTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择退房时间"
             :picker-options="pickerOptions"
             
            >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReserveForm">确 定</el-button>
        <el-button @click="cancelReserveDate">取 消</el-button>
      </div>
    </el-dialog>
      </el-row>

      
                  <!-- 我的对话框 -->
      <el-row v-show="showUser">

    <el-dialog title="我的信息" :visible.sync="showUser" width="500px" append-to-body :close-on-click-modal="false" @close="offMyUserDiaog">
      
      <el-descriptions title="基本信息">
    <el-descriptions-item label="账号">{{RegisterForm.username}}</el-descriptions-item>
    <el-descriptions-item label="密码">{{RegisterForm.password}}</el-descriptions-item>
    <el-descriptions-item label="昵称">{{RegisterForm.nickname}}</el-descriptions-item>
    <el-descriptions-item label="姓名">{{RegisterForm.name}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{RegisterForm.gender=='2'?'未知':RegisterForm.gender=='0'?'男':'女'}}</el-descriptions-item>
     <el-descriptions-item label="年龄">{{RegisterForm.age}}</el-descriptions-item>
    <el-descriptions-item label="职业">{{RegisterForm.occupation}}</el-descriptions-item>
    <el-descriptions-item label="电话号码">{{RegisterForm.phoneNumber}}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{RegisterForm.email}}</el-descriptions-item>
    <el-descriptions-item label="余额">{{RegisterForm.balance}}</el-descriptions-item>
     <el-descriptions-item label="注册时间">{{RegisterForm.registrationDate}}</el-descriptions-item>
</el-descriptions>

      <el-descriptions>
    <el-descriptions-item label="头像">
      <el-image :src="RegisterForm.avatar">
          </el-image>
    </el-descriptions-item>
</el-descriptions>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUsreDiago">修改信息</el-button>
        <el-button @click="offMyUserDiaog">取 消</el-button>
      </div>
    </el-dialog>



      </el-row>

            <!-- 充钱对话框 -->
            <el-row v-show="showMoney">

    <el-dialog title="充值" :visible.sync="showMoney" width="500px" append-to-body :close-on-click-modal="false" @close="offMoneyDiaog">
      <el-form :model="ruleFormMoney" status-icon :rules="rulesMoney" ref="ruleFormMoney" label-width="100px" class="demo-ruleForm">
  <el-form-item label="金额" prop="money">
    <el-input v-model.number="ruleFormMoney.money"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitFormMoney('ruleFormMoney')">提交</el-button>
    <el-button @click="resetForm('ruleFormMoney')">重置</el-button>
  </el-form-item>
</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="offMoneyDiaog">取 消</el-button>
      </div>
    </el-dialog>



      </el-row>



    </el-main>
<el-card class="box-card cardStyle" >
  <div slot="header" class="clearfix">
    <el-button style="float: right; padding: 3px 0" type="text"><a href="#head">回到顶部</a></el-button>
  </div>
  <div v-for="(item,index) in floor" :key="index" class="text item">
   <a :href="'#'+item.floorName"> {{ item.floorName }}</a>
  </div>
</el-card>
  </el-container>
  
</template>

<script>
import { getAllCarousel } from '@/api/data/carousel'
import { listGetAll } from '@/api/data/floor'
import { getAllRoom, delFile } from '@/api/data/room'
import { getAllRoomType } from '@/api/data/roomType'
import { addUser, queryByUserName,updateUser,getUser } from '@/api/data/user'
import { getToken } from '@/utils/auth'
import { queryAppointmentTime,updateReserve,addReserve,delReserve, listReserveByUserName} from "@/api/data/reserve";
import { delOrder,updateOrderByUserName,listOrderByUserName,updateOrder } from "@/api/data/order";
export default {
  dicts: ['gender', 'number_status','join_state'],

  data() {
     var checkMoney = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('金额不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 0) {
              callback(new Error('必须大于0'));
            } else if(value > 100000){
               callback(new Error('最多冲100000元'));
            }else   callback();
          }
        }, 1000);
      };
    // 自定义表单验证
    //定义账号和密码规则
    var checkUserNameOrPassWord = (rule, value, callback) => {
      setTimeout(() => {
        let reg = /[\u4E00-\u9FA5\s]{1,30}/
        if (reg.test(value)) {
          callback(new Error('不可出现汉字、空格且长度不能超过30'))
        } else {
          callback()
        }
      }, 1000)
    }
    //定义年龄校验规则
    var checkAge = (rule, value, callback) => {
      setTimeout(() => {
        if (value < 0 || value > 300) {
          callback(new Error('年龄不为负数或者不能大于300'))
        } else {
          callback()
        }
      }, 1000)
    }
    //定义手机号校验规则
    let checkContactWay = (rule, value, callback) => {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
      setTimeout(() => {
        if (value && !myreg.test(value)) {
          callback(new Error('请输入有效的手机号码'))
        } else {
          callback()
        }
      }, 200)
    }
    //定义邮箱验证规则
    let checkEmail = (rule, value, callback) => {
      let reEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
      if (value && !reEmail.test(value)) {
        if (value.length > 30) callback(new error('邮箱长度不能超过30位'))
        callback(new Error('请输入正确的邮箱格式'))
      } else {
        callback()
      }
    }
    //定义金额验证规则
    let checkBalance = (rule, value, callback) => {
      let balance = /^[0-9]+(\.[0-9]+)*$/
      if (value && !balance.test(value)) {
        if (value.length > 30) callback(new error('金额长度不能超过30位'))
        callback(new Error('只能输入数字'))
      } else {
        callback()
      }
    }
    return {
      ruleFormMoney:{},
      // 控制充钱对话框显示
      showMoney: false,
      // 控制个人信息
      showUser: false,
           // 预定表格数据
      reserveList: [],
      // 查询参数
            queryParamsMyReserve: {
        pageNum: 1,
        pageSize: 10,
        orderNumber: null,
        roomNumber: null,
        customerName: null,
        joinState: null,
        gender: null,
        phoneNumber: null,
        idCard: null,
        joinTime: null,
        checkOutTime: null
      },
      // 总条数为0条
      totalMyReserve:0,
      // 遮罩层
      loadingMyReserve:true,
            // 选中数组
      idsMyReserve: [],
           // 非多个禁用
      multipleMyReserve: true,
            // 非单个禁用
      singleMyReserve: true,
      // 控制我的预定
      myReserve: false,
            // 订单表格数据
      orderList: [],
      totalMyOrder: 0,
       // 查询参数
      queryParamsMyOrder: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        userName: null,
        amount: null,
        orderStatus: null,
        remarks: null,
        creationTime: null
      },
            // 遮罩层
      loadingMyOrder: true,
            // 非单个禁用
      singleMyOrder: true,
            // 选中数组
      idsMyOrder: [],
            // 非多个禁用
      multipleMyOrder: true,
      // 控制我的订单
      myOrder: false,
              // 订单参数
      formOrder: {},
       // 禁用之前
           pickerOptions: {
                disabledDate: (time) => {
                
                   const today = new Date().toLocaleDateString();
                   //禁用这一天之前的日期
          let disable = time < new Date(today);
           //循环后端返回的数据，禁用时间大于joinTime小于checkOutTime，注意dayStart要减去一天，才能真正禁用dayStart这一天。
                        this.roomNo.forEach((item) => {
            disable =
              disable ||
              (time.getTime() > new Date(item.joinTime).getTime() - 8.64e7 &&
                time.getTime() < new Date(item.checkOutTime).getTime()); //减去一天8.64e7
          });
                    // return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000; 
                    return disable
                },
            },
            //已被预约的房间
      roomNo:[],
      // 预约表单
      formReserveDate:{},
      // 预约对话框显示控制
      reserveForm: false,
      // 房间详情模态框控制
      singleRoomShow: false,
      //详情页房间数据
      singleRoom: null,
      // 控制欢迎显示
      huanyingcontroller: false,
      //控制登录显示
      loginButton: true,
      //控制注销显示
      registerButton: true,
      // 登录的用户
      userLogin: {},
      //注册表单中的参数
      // input框是否禁用
      disabled: false,
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址登录对话框展示
        url: process.env.VUE_APP_BASE_API + '/file/upload/noAuto',
        // 上传的文件列表
        fileList: []
      },
      activeIndex: '1',
      carousel: null,
      floor: null,
      room: null,
      roomType: null,
      // 房间列表展示
      roomShow: true,
      // 登录对话框展示
      loginShow: false,
      dialogVisibleLogin: false,
      // 登录参数
      loginForm: {
        userId: null
      },
      //注册对话框展
      registerShow: false,
      dialogVisibleRegister: false,
      // 注册和个人信息参数
      RegisterForm: {},
      rulesMoney:{
           money:[{ validator: checkMoney, trigger: 'blur' }]
      },
      rulesReserve:{
                    customerName: [
            { required: true, message: '请输入客户姓名', trigger: 'blur' }
          ],

           gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          phoneNumber: [
            { required: true, message: '请输入客户手机号', trigger: 'blur' }
          ],
           idCard: [
            { required: true, message: '请输入客户身份证', trigger: 'blur' }
          ],
            joinTime: [
            { required: true, message:  '请选择入住时间', trigger: 'blur' }
          ],
                      checkOutTime: [
            { required: true, message: '请选择退房时间', trigger: 'blur' }
          ],
      },
      rulesLogin: {
          //登录
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }
        ,
          { validator: checkUserNameOrPassWord, trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }
        ,
          { validator: checkUserNameOrPassWord, trigger: 'blur' }
        ]
      },
      rules: {
        //注册
        username: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { validator: checkUserNameOrPassWord, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: checkUserNameOrPassWord, trigger: 'blur' }
        ],
        nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        age: [
          { validator: checkAge, trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' }
        ],
        phoneNumber: [{ validator: checkContactWay, trigger: 'blur' }],
        email: [{ validator: checkEmail, trigger: 'blur' }],
        balance: [{ validator: checkBalance, trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.rest()
    // 获取轮播图数据
    getAllCarousel().then(res => {
      this.carousel = res.data
    })
    //获取房间数据
    getAllRoom().then(res => {
      this.room = res.data
    })
    //获取楼层数据
    listGetAll().then(res => {
      this.floor = res.data
    })
    //获取房间类型数据
    getAllRoomType().then(res => {
      this.roomType = res.data
    })
    if (localStorage.getItem('user') != null) {
      let res = await getUser(JSON.parse(localStorage.getItem("user")).userId)
      localStorage.setItem("user",JSON.stringify(res.data))
      this.userLogin = JSON.parse(localStorage.getItem('user'))
      this.huanyingcontroller = true
      this.loginButton = false
      this.registerButton = false
    }
  },
  methods: {
    // 控制登录框显示
    openLoginDiago(){
      this.loginShow = true
      this.dialogVisibleLogin = true
    },
    //取消订单
    async handleCancleMyOrder(row){
      if(row.orderStatus == '0'){
                row.orderStatus = '3'
      let result = await updateOrder(row)
      if(result.code == 200){
        this.$modal.msgSuccess("订单取消，已退款");
      }else{
        this.$modal.msgError("操作失败，请联系管理员");
      }
      }
    else{
    this.$modal.msgError("取消失败，已入住过或已取消");
    }
     
 

    },
    openMyMoney(){
        this.showMoney = true
    },
    offMoneyDiaog(){
      this.showMoney = false
      this.resetForm('ruleFormMoney')
    },
    submitFormMoney(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleFormMoney.money)
            var subject = '充值'+this.ruleFormMoney.money
            // window.location.href = process.env.VUE_APP_BASE_API+"/alipay/pay?subject="+subject+"&traceNo=jaja1&totalAmount="+this.ruleFormMoney.money+"&userId="+this.userLogin.userId
            window.location.href=process.env.VUE_APP_BASE_API+"/alipay/pay?subject="+subject+"&traceNo=jaja1&totalAmount="+this.ruleFormMoney.money+"&userId="+this.userLogin.userId
          } else {
            return false;
          }
        });
      },
    // gotoMoeny(){
    //   this.offMoneyDiaog = true
    //   // this.$router.push(process.env.VUE_APP_BASE_API+"/alipay/pay?subject=haha&traceNo=jaja&totalAmount=heihei&alipayTraceNo=llll&userId="+this.userLogin.userId);
    //   // window.location.href = process.env.VUE_APP_BASE_API+"/alipay/pay?subject=haha&traceNo=jaja&totalAmount=heihei&alipayTraceNo=llll&userId="+this.userLogin.userId
    // },
    updateUsreDiago(){
      this.openRegisterDiago()
      this.RegisterForm = this.userLogin
    },
    // 关闭个人信息对话框
    offMyUserDiaog(){
      this.showUser = false
      this.resetForm('ruleFormMoney')
    },
    // 打开用户信息
    openMyUser(){
      this.RegisterForm = JSON.parse(localStorage.getItem('user'))
      console.log(this.RegisterForm)
      this.showUser = true
    },
        // 多选框选中数据
    handleSelectionChangeMyReserve(selection) {
      this.idsMyReserve = selection.map(item => item.reserveId)
      this.singleMyReserve = selection.length!==1
      this.multipleMyReserve = !selection.length
    },
        /** 查询预定列表 */
    getListMyReserve() {
      console.log(this.queryParamsMyReserve)
      this.loadingMyReserve = true;
      // 1.先拿到用户账号，把账号传到后台，后台接收这个账号，调用订单查询接口
      var userName =JSON.parse(localStorage.getItem("user")).username
      listReserveByUserName(userName,this.queryParamsMyReserve.pageSize,this.queryParamsMyReserve.pageNum).then(response => {
        this.reserveList = response.rows;
        this.totalMyReserve = response.total;
        this.loadingMyReserve = false;
      });
    },
        /** 删除按钮操作 */
    handleDeleteMyReserve(row) {
      const reserveIds = row.reserveId || this.idsMyReserve;
      this.$modal.confirm('是否确认删除预定编号为"' + reserveIds + '"的数据项？').then(function() {
        return delReserve(reserveIds);
      }).then(() => {
        this.getListMyReserve();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
     /** 我的预约修改按钮操作 */
    async handleUpdateMyReserve(row) {
      this.reserveForm = true
      this.resetReserveDate();
      console.log(row)
      this.formReserveDate = row
      this.getNo(row)
    },
    // 控制我的预约显示
    offMyReserveDiaog(){
      this.myReserve = false
    },
    // 打开我的预约对话框
    openMyReserve(){
                        if (this.loginTrueOrFalse() == false) {  
                     this.$modal.msgError('请先登录')        
                      return   }
      this.getListMyReserve()
this.myReserve = true  
    },
        // 打开我的订单对话框
    openMyOrder(){
                  if (this.loginTrueOrFalse() == false) {  
                     this.$modal.msgError('请先登录')        
                      return   }
      this.getMyOrderList()
      this.myOrder = true
    },
     /** 查询订单列表 */
    getMyOrderList() {
      this.loadingMyOrder = true;
      this.queryParamsMyOrder.userName = JSON.parse(localStorage.getItem("user")).username
      listOrderByUserName(this.queryParamsMyOrder).then(response => {
        this.orderList = response.rows;
        this.totalMyOrder = response.total;
        this.loadingMyOrder = false;
      });
    },
        /** 删除订单按钮操作 */
    handleDeleteMyOrder(row) {
      const ids = row.id || this.idsMyOrder;
      this.$modal.confirm('是否确认删除订单编号为"' + ids + '"的数据项？').then(function() {
        return delOrder(ids);
      }).then(() => {
        this.getMyOrderList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
        // 多选框选中数据
    handleSelectionChangeMyOrder(selection) {
      this.idsMyOrder = selection.map(item => item.id)
      this.singleMyOrder = selection.length!==1
      this.multipleMyOrder = !selection.length
    },
    // 订单框重置
     resetMyOder() {
      this.formOrder = {
        id: null,
        orderId: null,
        userName: null,
        amount: null,
        orderStatus: "0",
        remarks: null,
        creationTime: null
      };
      this.resetForm("formOrder");
    },
    // 订单框关闭
    offMyOrderDiaog(){
this.resetMyOder()
this.myOrder = false
    },
    // 预约框关闭
    offFormReserveDate(){
      this.cancelReserveDate()
    },
        // 取消按钮
    cancelReserveDate() {
      this.reserveForm = false;
      this.resetReserveDate();
    },
        // 预约表单重置
    resetReserveDate() {
      this.formReserveDate = {
        reserveId: null,
        orderNumber: null,
        roomNumber: null,
        customerName: null,
        joinState: null,
        gender: null,
        phoneNumber: null,
        idCard: null,
        joinTime: null,
        checkOutTime: null
      };
      this.resetForm("formReserveDate");
    },
    // 提交预约
    submitReserveForm() {
      var that = this
      this.$refs["formReserveDate"].validate(valid => {
        if (valid) {
          if (this.formReserveDate.reserveId != null) {
            updateReserve(this.formReserveDate).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.reserveForm = false;
                    that.getListMyReserve()
            });
          } else {
            this.formReserveDate.joinState = '0'
            // 在加这个预约之前判断用户金额是否足够
           var result=this.room.find(item=> item.roomNumber == this.formReserveDate.roomNumber)
           if(result.roomDiscountPrice > this.userLogin.balance){
              this.$modal.msgError("余额不足,请充值");
            return
           }
            addReserve(this.formReserveDate).then(response => {
             that.formOrder.orderId = response.msg
             that.formOrder.userName = JSON.parse(localStorage.getItem("user")).username
              updateOrderByUserName(that.formOrder).then((res)=>{
              })
              this.userLogin.balance = this.userLogin.balance - result.roomDiscountPrice
              updateUser(this.userLogin).then((res)=>{})
              this.$modal.msgSuccess("预约成功");
              this.reserveForm = false;
              this.resetReserveDate()
              setTimeout(() => {
                location.reload(); 
              }, 1000);
            }); 
          }
        }
      });
    },
    // 禁用已被预约的日期
  async getNo(ele) {
      // this.formReserveDate.joinTime = null
      // this.formReserveDate.checkOutTime = null
      let response = await queryAppointmentTime(ele.roomNumber)
      this.roomNo = response.data
  
    },  
    //预定按钮
    reserveButton(ele){
            if (this.loginTrueOrFalse() == false) {  
                     this.$modal.msgError('请先登录')        
                      return   }
      this.openReserveDialog(ele)
      this.formReserveDate.roomNumber = ele.roomNumber
    },
    // 点击房间里面预约
    openReserveDialog(ele) {
          this.getNo(ele)
      this.formReserveDate.roomNumber = ele.roomNumber
      this.singleRoomShow = false
      this.reserveForm = true
    },
    // 点击房间列表进入详情
    gotoRoom(ele) {
      if (this.loginTrueOrFalse() == false) {
        this.$modal.msgError('请先登录')
        return
      }
      this.singleRoom = ele
      this.formReserveDate.roomNumber = ele.roomNumber
      this.singleRoomShow = true
    },
    //判断是否登录
    loginTrueOrFalse() {
      if ( Object.keys(this.userLogin).length===0 ) {
        return false
      } else return true
    },
    // 退出登录
    logOut() {
      localStorage.removeItem('user')
      this.userLogin = null
      this.huanyingcontroller = false
      this.loginButton = true
      this.registerButton = true
    },
    // 登录弹框关闭
    offLoginDialog() {
      this.loginShow = false
      this.dialogVisibleLogin = false
      this.loginRest()
      this.$refs.yanzhengma.status = null
    },
    // 打开注册弹框
    openRegisterDiago(){
      this.registerRest()
      this.dialogVisibleRegister = true
    },
    // 注册弹框关闭时触发
    offRegisterDialog() {
      if(this.huanyingcontroller==true){
      this.$refs.yanzhengma.status = null
      this.registerShow = false
      this.dialogVisibleRegister = false
      return 
      }

      this.registerRest()
      this.$refs.yanzhengma.status = null
      this.registerShow = false
      this.dialogVisibleRegister = false
    },
    // 注册取消按钮
    cancelRegister() {
       if(this.huanyingcontroller==true){
      this.$refs.yanzhengma.status = null
      this.registerShow = false
      this.dialogVisibleRegister = false
      return 
      }
      this.registerShow = false
      this.dialogVisibleRegister = false
      this.registerRest()
      this.loginShow = false
      this.dialogVisibleLogin = false
      this.registerShow = false
      this.dialogVisibleRegister = false
    },
    deletePreImg() {
      //调用删除文件的方法删除文件
      if (this.RegisterForm.avatar != null) delFile(this.RegisterForm.avatar)
    },
    //图片上传成功的回调
    handleAvatarSuccessRegisterForm(response, file, fileList) {
      this.RegisterForm.avatar = response.msg
      this.$forceUpdate() // 手动更新DOM
    },
    //图片上传前
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    /** 提交按钮 */
    submitFormRegister() {
      this.$refs['RegisterForm'].validate(valid => {
        if (valid) {
          if (this.$refs.yanzhengma.status == null || this.$refs.yanzhengma.status == false) {
            this.$modal.msgError('验证未通过，请先完成验证')
            return
          }
          this.$refs.yanzhengma.status = false
          if(this.RegisterForm.userId != null){
                 updateUser(this.RegisterForm).then(response => {
                  localStorage.setItem("user",JSON.stringify(this.RegisterForm)) 
                    location.href = "http://localhost/front/home";
              setTimeout(() => {
                this.$modal.msgSuccess('修改成功')
              }, 500);
            })
          }else{
                      addUser(this.RegisterForm).then(response => {
            if (200 == response.code) {
              this.$modal.msgSuccess('注册成功')
            } else {
              this.$modal.msgSuccess(response.msg)
            }
          })
          this.registerRest()
          this.registerShow = false
          this.dialogVisibleRegister = false
          }
       
        }
      })
    },
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 发送登录请求到后端
          this.login()
        } else {
          // 表单验证失败
        }
      })
    },
    async login() {
      if (this.$refs.yanzhengma.status == null || this.$refs.yanzhengma.status == false) {
        this.$modal.msgError('验证未通过，请先完成验证')
        return
      }
      this.$refs.yanzhengma.status = false
      let res = await queryByUserName(this.loginForm)
      if (res.code == 200) {
        this.$modal.msgSuccess('登录成功')
        this.loginForm.userId = res.data.userId
        this.userLogin = res.data
        localStorage.setItem('user', JSON.stringify(res.data))
        this.offLoginDialog()
        this.loginButton = false
        this.registerButton = false
        this.huanyingcontroller = true
        // this.getMyOrderList()
      }
      setTimeout(() => {
        if (localStorage.getItem('user') != null) {
          localStorage.removeItem('user')
        }
      }, 10000 * 60)
    },
    handleRegister() {
      this.loginShow = false
      this.dialogVisibleLogin = false
      this.registerShow = true
      this.dialogVisibleRegister = true
    },
    // 对房间类型id进行处理返回房间类型
    roomTypeIdParse(roomTypeId) {
      var result = this.roomType.find(ele => ele.roomTypeId == roomTypeId)
      return result.roomTypeName
    },
    // 对所属楼层id进行处理返回所属楼层
    floorIdParse(floorId) {
      var result = this.floor.find(ele => ele.floorNumber == floorId)
      return result.floorName
    },
    // 点击上方导航触发的函数
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      // 跳转到哪个导航页面
      if (key == 1) {
        this.$router.push('/front/home')
      } else if (key == 2) {
        console.log(key)
      } else if (key == 3) {
        console.log(key)
        this.loginShow = true
        console.log(this.loginShow)
      } else if (key == 4) {
        console.log(key)
        this.registerShow = true
      }
    },
    //重置数据
    rest() {
      this.activeIndex = '1'
      this.carousel = null
      this.floor = null
      this.room = null
      this.roomType = null
      this.loginShow = false
      this.dialogVisibleLogin = false
      this.registerShow = false
      this.dialogVisibleRegister = false
    },
    //注册重置
    registerRest() {
      //注册
      this.RegisterForm = {
        userId: null,
        username: null,
        password: null,
        nickname: null,
        avatar: null,
        name: null,
        gender: null,
        age: null,
        occupation: null,
        phoneNumber: null,
        email: null,
        registrationDate: null,
        balance: null,
        status: '0'
      }
      this.resetForm('RegisterForm')
    },

    //登录重置
    loginRest() {
      //登录
      this.loginForm = {
        userId: null,
        username: null,
        password: null
      }
      this.resetForm('loginForm')
    }
  }
}
</script>

<style>
.el-header {
  background-color: #31609f;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 100px;
}
body > .el-container {
  margin-bottom: 40px;
}
/* header样式 */
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-menu {
  background-color: #31609f;
}

.el-menu--horizontal > .el-menu-item {
  color: #fafcff;
}
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: #fff;
  /* border-bottom: 2px solid #ffffff; */
  color: #000000;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  /* color: #303133; */
}
/* 轮播图样式 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.bannerImg {
  width: 100%;
  height: 100%;
}
.el-carousel__container {
  position: relative;
  height: 450px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  height: 200px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.elCard {
  margin-bottom: 40px;
}
/* 表单注册样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  /* .box-card {
    width: 480px;
  } */

  .cardStyle{
       position: fixed;
    top: 200px;
    z-index: 999;
  }
</style>